<template>
   
        
        <div class="finance-body">
          <div class="finance-title">
            <span>财务信息</span>
          </div>
          <div class="finance-content">
            <div class="finance-item">
              <p>合同归属单位:</p>
              <Input class="finance-item-input" v-model="infodetail.contractOrigin" disabled/>
            </div>
            <div class="finance-item">
              <p>项目经费:</p>
              <InputNumber :min="0" class="finance-item-input" v-model="infodetail.fund" disabled/>
              <span class="finance-suffix">万元</span>
            </div>
            <div class="finance-item">
              <p>毛产值:</p>
              <InputNumber class="finance-item-input" v-model="infodetail.gross" disabled/>
              <span class="finance-suffix">万元</span>
            </div>
          </div>
          <div class="finance-title">
            <span>外协费</span>
            <span class="finance-sum">总金额:{{ outsourcingValue }}万</span>
          </div>
          <div class="finance-content">
            <div>
              <div class="finance-item">
                <p>检测费:</p>
                <InputNumber :min="0" v-model="foreignHelp.checkFee" class="finance-item-input" disabled/>
                <span class="finance-suffix">万元</span>
              </div>
              <div class="finance-item">
                <p>专家费:</p>
                <InputNumber :min="0" v-model="foreignHelp.professionFee" class="finance-item-input" disabled/>
                <span class="finance-suffix">万元</span>
              </div>
              <div class="finance-item">
                <p>会务费:</p>
                <InputNumber :min="0" v-model="foreignHelp.meetingFee" class="finance-item-input" disabled/>
                <span class="finance-suffix">万元</span>
              </div>
            </div>
            <div>
              <div class="finance-item">
                <p>服务费:</p>
                <InputNumber :min="0" v-model="foreignHelp.serviceFee" class="finance-item-input" disabled/>
                <span class="finance-suffix">万元</span>
              </div>
              <div class="finance-item">
                <p>其它费用:</p>
                <InputNumber :min="0" v-model="foreignHelp.otherFee" class="finance-item-input" disabled/>
                <span class="finance-suffix">万元</span>
              </div>
              <div class="finance-item" >
                <p>业务开支有无:</p>
                <RadioGroup v-model="foreignHelp.businessFeeTag">
                  <Radio label="有"></Radio>
                  <Radio label="无"></Radio>
                </RadioGroup>
              </div>
            </div>
          </div>
          <div class="finance-title">
            <span>收款信息</span>
            <span class="finance-sum">收款总金额:{{ receiveValue }}万</span>
            
          </div>
          <div class="finance-content">
            <div class="finance-list-item" v-for="(item, index) in collections" :key="index">
              <div class="finance-item">
                <p>收款日期:</p>
                <DatePicker v-model="item.date" format="yyyy-MM-dd" class="finance-item-input" disabled/>
              </div>
              <div class="finance-item">
                <p>收款金额:</p>
                <InputNumber v-model="item.amount" :min="0" class="finance-item-input" disabled/>
                <span class="finance-suffix">万元</span>
              </div>
              
            </div>
          </div>
          <div class="finance-title">
            <span>发票信息</span>
            <span class="finance-sum">发票总金额:{{ billValue }}万</span>
            
          </div>
          <div class="finance-content">
            <div class="finance-list-item" v-for="(item, index) in invoices" :key="index">
              <div class="finance-item">
                <p>发票日期:</p>
                <DatePicker v-model="item.date" format="yyyy-MM-dd" class="finance-item-input" disabled/>
              </div>
              <div class="finance-item">
                <p>发票金额:</p>
                <InputNumber v-model="item.amount" :min="0" class="finance-item-input" disabled/>
                <span class="finance-suffix">万元</span>
              </div>
              
            </div>
          </div>
          <div class="finance-title">
            <span>奖金信息</span>
            <span class="finance-sum">奖金总金额:{{ rewardValue }}万</span>
            <span class="finance-sum">毛产值奖金总金额:{{ grassRewardValue }}万</span>
            
          </div>
          <div class="finance-content">
            <div class="finance-list-item" v-for="(item, index) in rewards" :key="index">
              <div class="finance-item">
                <p>奖金日期:</p>
                <DatePicker v-model="item.date" format="yyyy-MM-dd" class="finance-item-input" disabled/>
              </div>
              <div class="finance-item">
                <p>奖金金额:</p>
                <InputNumber v-model="item.amount" :min="0" class="finance-item-input" disabled/>
                <span class="finance-suffix">万元</span>
              </div>
              <div class="finance-item">
                <p>毛产值奖金金额:</p>
                <InputNumber v-model="item.grossAmount" :min="0" class="finance-item-input" disabled/>
                <span class="finance-suffix">万元</span>
              </div>
              
            </div>
          </div>
          <div class="finance-title">
            <span>结算总金额</span>
            <span class="finance-sum">发票总金额:{{ accountValue }}万</span>
            
          </div>
          <div class="finance-content">
            <div class="finance-list-item" v-for="(item, index) in settlements" :key="index">
              <div class="finance-item">
                <p>发票日期:</p>
                <DatePicker v-model="item.date" format="yyyy-MM-dd" class="finance-item-input" disabled/>
              </div>
              <div class="finance-item">
                <p>发票金额:</p>
                <InputNumber v-model="item.amount" :min="0" class="finance-item-input" disabled/>
                <span class="finance-suffix">万元</span>
              </div>
              
            </div>
          </div>
          <div class="finance-title">
            <span>备注</span>
          </div>
          <div class="finance-content">
            <Input type="areatext" v-model="infodetail.remark" disabled/>
          </div>
          
        </div>
     
</template>
<script>
import axios from 'axios';
export default {
    name:'finacenews',
    data(){
        return{
          infodetail:{
            fund:'',//经费
            contractOrigin:'',//合同归属单位
            remark:'',//备注
            gross:null//毛产值

          },//包含合同归属，备注，经费，
          invoices:[],//发票信息
          collections:[],//收款信息
          rewards:[],//奖金信息
          settlements:[],//结算信息
          foreignHelp:{
            checkFee:null,//检测费
            professionFee:null,//专家费
            meetingFee:null,//会务费
            serviceFee:null,//服务费
            otherFee:null,//其他费用
            businessFeeTag:null,//业务开支有无

          },//外协费

            
        }
    },
    computed:{
      accountValue() {
      let AV = 0;
      this.settlements.forEach(e => {
        AV += e.amount;
      });
      return AV;
    },
      grassRewardValue() {
      let GRV = 0;
      this.rewards.forEach(e => {
        GRV += e.grossAmount;
      });
      return GRV;
    },
      rewardValue() {
      let RV = 0;
      this.rewards.forEach(e => {
        RV += e.amount;
      });
      return RV;
    },
      billValue(){
        let BV = 0;
      this.invoices.forEach(e => {
        BV += e.amount;
      });
      return BV;

      },
      receiveValue(){
        let RV = 0;
      this.collections.forEach(e => {
        // console.log(e);
        RV += e.amount;
      });
      return RV;

      },
      outsourcingValue(){
        var a=[];
        a.push(this.foreignHelp.checkFee);
        a.push(this.foreignHelp.professionFee);
        a.push(this.foreignHelp.meetingFee);
        a.push(this.foreignHelp.serviceFee);
        a.push(this.foreignHelp.otherFee);
         let OF = 0;
      a.forEach(e => {
        OF += e;
      });
      return OF;
      }
    },
    created:function(){
         axios({
            method:"get",
            url:this.IP.IP+"/finance/getFinance?projectId="+this.callbackdata,
        }).then(result=>{
            // console.log(this.row);
            this.infodetail=result.data.data;
            // console.log(result)
            this.invoices=result.data.data.invoices;
            this.collections=result.data.data.collections;
            this.rewards=result.data.data.rewards;
            this.settlements=result.data.data.settlements;
            this.foreignHelp=result.data.data.foreignHelp;
            if(this.foreignHelp.businessFeeTag){
              this.foreignHelp.businessFeeTag="有";

            }else{
              this.foreignHelp.businessFeeTag="无";

            }
            // console.log(this.invoices);
            // console.log(this.collections);
            // console.log(this.rewards);
            // console.log(this.settlements);
            // console.log(this.foreignHelp);
            
        })
    },
    props:['callbackdata'],
}
</script>

<style>
.finance-block-enter-active,
.finance-block-leave-active {
  transition: all 0.3s ease;
}
.finance-block-enter,
.finance-block-leave-to {
  transform: scale(0.9);
  opacity: 0;
}
.finance-block {
  z-index: 1010;
  overflow-y: auto;
  left: 0;
  top: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #efefef;
}
.finance-body {
  padding: 10px;
}
.finance-modal {
  z-index: 1051;
}
.finance-block-top {
  font-size: 15px;
  border-bottom: 1px solid #cdcdcd;
  background: #efefef;
}
.finance-block-close {
  cursor: pointer;
  display: inline-block;
  border-right: 1px solid #cdcdcd;
  font-size: 20px;
  padding: 0 5px;
}
.finance-title {
  margin: 10px 5px;
  font-size: 15px;
  padding: 5px;
  color: #000000;
  border-bottom: 1px solid #cdcdcd;
}
.finance-content {
  padding: 10px 5px;
  border-bottom: 1px dashed #cdcdcd;
}
.finance-item {
  display: inline-block;
}
.finance-item p {
  display: inline-block;
  width: 100px;
}
.finance-suffix {
  margin-right: 5px;
}
.ivu-input[disabled],
.ivu-input-number-input[disabled] {
  color: #000000;
}
.finance-item-input {
  width: 200px;
}
.finance-sum {
  margin-left: 10px;
  font-weight: bold;
  color: #27a9e3;
}
.finance-list-item {
  margin-bottom: 5px;
}
</style>